<template>
  <div class="container">
    <div class="view-main">
      <el-card>
        <SiftQuestion @clear="clear" @search="search" />
        <!-- tab栏 -->
        <el-row>
          <el-tabs v-model="chkState" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all" />
            <el-tab-pane label="待审核" name="0" />
            <el-tab-pane label="已审核" name="1" />
            <el-tab-pane label="已拒绝" name="2" />
          </el-tabs>
          <el-alert
            type="info"
            show-icon
            :closable="false"
            :title="`数据一共${page.total}条`"
          ></el-alert>
        </el-row>
        <!-- 表格 -->
        <el-row>
          <el-table :data="list" style="margin-top: 10px">
            <el-table-column
              label="试题编号"
              prop="number"
              align="center"
              width="280px"
            ></el-table-column>
            <el-table-column
              label="学科"
              prop="subject"
              align="center"
            ></el-table-column>
            <el-table-column
              label="目录"
              prop="catalog"
              align="center"
            ></el-table-column>
            <el-table-column label="题型" prop="questionType" align="center">
              <template #default="{ row }">{{
                row.questionType | formatQuestionType
              }}</template>
            </el-table-column>
            <el-table-column
              label="题干"
              prop="question"
              align="center"
              width="200px"
            >
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              prop="addDate"
              align="center"
              width="200px"
            >
              <template #default="{ row }">{{
                row.addDate | parseTime
              }}</template>
            </el-table-column>
            <el-table-column label="难度" prop="difficulty" align="center">
              <template #default="{ row }">{{
                row.difficulty | formatDifficulty
              }}</template>
            </el-table-column>
            <el-table-column
              label="录入人"
              prop="creator"
              align="center"
              width="100px"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="220px"
              fixed="right"
              align="center"
            >
              <template #default="{ row }">
                <el-button type="text" @click="preview(row.id)">预览</el-button>
                <el-button
                  type="text"
                  :disabled="row.chkState === 1 || row.chkState === 2"
                  @click="audit(row.id)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  :disabled="row.publishState === 0"
                  @click="$router.push(`/questions/new?id=${row.id}`)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="changePublishState(row.id, row.publishState)"
                  >{{ row.publishState === 1 ? "下架" : "上架" }}</el-button
                >
                <el-button type="text" @click="deleteQuestion(row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            :total="page.total"
            :current-page="page.page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pagesize"
            @current-change="pageChange"
            style="margin-top: 10px"
            @size-change="sizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 预览弹层 -->
    <QuestionPreview
      :showDialog.sync="showDialog"
      :questionId="questionId"
      ref="QuestionPreview"
    />
    <!-- 审核弹层 -->
    <el-dialog
      :visible="showAudit"
      title="题目审核"
      width="30%"
      @close="btnCancel"
    >
      <el-row>
        <el-radio v-model="auditType" :label="1">通过</el-radio>
        <el-radio v-model="auditType" :label="2" style="margin-left: 20px"
          >拒绝</el-radio
        >
      </el-row>
      <el-row style="margin-top: 20px">
        <el-input
          type="textarea"
          placeholder="请输入审核意见"
          v-model.trim="suggestion"
        ></el-input>
      </el-row>
      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import QuestionPreview from '../components/questions-preview.vue'
import {
  choice,
  choiceCheck,
  choicePublish,
  remove
} from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
import SiftQuestion from '../components/sift-question.vue'
export default {
  filters: {
    formatQuestionType (value) {
      const obj = questionType.find((item) => item.value === parseInt(value))
      if (obj && obj.label) return obj.label
      return '未知'
    },
    formatDifficulty (value) {
      const obj = difficulty.find((item) => item.value === parseInt(value))
      if (obj && obj.label) return obj.label
      return '未知'
    }
  },
  components: { QuestionPreview, SiftQuestion },
  data () {
    return {
      list: [],
      page: {
        page: 1, // 当前页数
        pagesize: 5, // 每页条数
        total: 0 // 总数
      },
      chkState: 'all', // 当前查看的审核状态
      questionId: 0, // 当前问题ID
      showDialog: false, // 控制预览弹层显示隐藏
      showAudit: false, // 控制审核弹层显示隐藏
      suggestion: '', // 建议输入框
      auditType: '', // 当前审核类型
      auditId: '' // 当前审核Id
    }
  },
  created () {
    this.gitChoiceList(this.page)
  },
  methods: {
    // 切换查看状态(审核/未审核)
    handleClick () {
      this.page.page = 1
      if (this.chkState === 'all') return this.gitChoiceList(this.page)
      this.gitChoiceList({ ...this.page, chkState: parseInt(this.chkState) })
    },
    // 获取表格数据
    async gitChoiceList (data) {
      const { data: res } = await choice(data)
      this.list = res.items
      this.page.total = res.counts
    },
    // 翻页
    pageChange (newPage) {
      this.page.page = newPage
      this.gitChoiceList({ ...this.page, chkState: parseInt(this.chkState) })
    },
    // 每页条数发生变化
    sizeChange (newSize) {
      this.page.pagesize = newSize
      this.gitChoiceList({ ...this.page, chkState: parseInt(this.chkState) })
    },
    // 清除按钮
    clear () {
      this.page.page = 1
      this.gitChoiceList({ ...this.page, chkState: parseInt(this.chkState) })
    },
    // 搜索
    search (data) {
      this.page.page = 1
      this.chkState = 'all'
      const searchData = {}
      for (var k in data) {
        if (data[k] !== '') {
          searchData[k] = data[k]
        }
      }
      this.gitChoiceList({ ...searchData, ...this.page })
    },
    // 预览
    preview (id) {
      this.questionId = id
      this.$refs.QuestionPreview.getQuestionDetail(id)
      this.showDialog = true
    },
    // 审核
    audit (id) {
      this.auditId = id
      this.showAudit = true
    },
    // 取消
    btnCancel () {
      this.showAudit = false
      this.auditType = ''
      this.suggestion = ''
    },
    // 确定
    async btnOk () {
      if (this.auditType === '') return this.$message.warning('请选择审核结果')
      if (this.suggestion === '') {
        return this.$message.warning('请输入审核意见')
      }
      await choiceCheck({
        id: this.auditId,
        chkState: parseInt(this.auditType),
        chkRemarks: this.suggestion
      })
      this.$message.success('操作成功')
      this.showAudit = false
      this.gitChoiceList({ ...this.page, chkState: parseInt(this.chkState) })
    },
    // 上/下架
    async changePublishState (id, state) {
      try {
        await this.$confirm(
          `你确认${state === 1 ? '下架' : '上架'}这道题目吗`,
          { type: 'warning' }
        )
        state === 1
          ? await choicePublish({ id, publishState: 0 })
          : await choicePublish({ id, publishState: 1 })
        this.$message.success('操作成功')
        this.gitChoiceList(this.page)
      } catch (err) {
        console.log(err)
      }
    },
    // 删除
    async deleteQuestion (id) {
      try {
        await this.$confirm('此操作将永久删除该题目,是否继续', {
          type: 'warning'
        })
        await remove({ id })
        this.gitChoiceList({ ...this.page, chkState: parseInt(this.chkState) })
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.view-main {
  padding: 5px 10px 0 10px;
  margin-bottom: 10px;
  ::v-deep .el-table th.is-leaf {
    background-color: #fafafa !important;
    border-bottom: 2px solid #e8e8e8;
  }
}
</style>
